<template>
  <div style="position: relative;">
    <div class="ht-head-wrap">
      <div class="title-item"><router-link to="/administrative">县情概况</router-link></div>
      <div class="title-item"><router-link to="/party">党建引领</router-link></div>
      <div class="ht-top"><div class="ht-title"></div></div>
      <div class="title-item"><router-link to="/econdev/">经济发展</router-link></div>
      <div class="title-item title-item-active"><router-link to="/humanistic">人文旅游</router-link></div>
    </div>
    <div class="ht-content clear-float">
      <div class="content-left">
        <div class="content-ll"><tourist-source></tourist-source></div>
        <div class="content-lm"><tourist-info></tourist-info></div>
        <div class="content-lr"><tourist-consumption></tourist-consumption></div>
      </div>

      <div class="content-middle">
        <div class="content-mt">
          <div>
            <div class="clear-float">
              <img src="../../assets/imgs/v2/cloud.png" />
              <div>
                <p>{{nowDate}} {{weekDay}} </p>
                <div class="mt-weather-left">
                  <label class="temperature">{{weatherData.tmp}}</label>
                  <span>℃</span>
                  <br />
                  <span>{{weatherData.cond_txt}}(实时)</span>
                </div>
                <div class="mt-weather-right">
                  <p> <span>{{weatherData.tmp_min}}~{{weatherData.tmp_max}}℃</span> <span>{{weatherData.cond_txt_d}}</span>
                    <span>{{weatherData.wind_dir}} {{weatherData.wind_sc}}级</span> </p>
                  <!-- <div> 89 良 </div> -->
                </div>
              </div>
            </div>
            <p v-if="active == 0">
              <label>截至今日国内游客总数（人）</label>
              <span class="lcd-font">
                <count-to :end="provinceNum" :usegroup="true"></count-to>
              </span>
            </p>
            <p v-else-if="active == 1">
              <label>截至今日国内游客总数（人）</label>
              <span class="lcd-font">
                <count-to :end="provinceNum" :usegroup="true"></count-to>
              </span>
            </p>
            <p v-else-if="active == 2">
              <label>截至今日省内游客总数（人）</label>
              <span class="lcd-font">
                <count-to :end="cityNum" :usegroup="true"></count-to>
              </span>
            </p>
            <p>
              <label>截至今日游客总消费（￥）</label>
              <span class="lcd-font">
                <count-to :end="totalIncome" :usegroup="true"></count-to>
              </span>
            </p>
          </div>
          <div class="slogan-box">
            <img src="../../assets/imgs/v2/slogan.png" alt="">
          </div>
        </div>
        <div class="content-mm">
          <tourist-map @changeMap='handleMapChange'></tourist-map>
        </div>
        <div class="content-mb">
          <div>
            <p>全域旅游收入分析</p>
            <common-dualarea-chart ref="tourismIncome" :config="tourismIncomeConfig"></common-dualarea-chart>
          </div>
        </div>
      </div>

      <div class="content-right">
        <div class="content-rl">
          <tourist-video></tourist-video>
        </div>
        <div class="content-rm">
          <tourist-style></tourist-style>

          </div>
        <div class="content-rr">

          <public-opinion></public-opinion>
          <!-- <tourist-complaint></tourist-complaint> -->
          </div>
        <!-- <div class="card-item card-l" style="height: 340px;padding: 0;">
          <p class="card-title" style="padding-left: 20px;">景区旅客投诉问题排名及分析</p>
          <common-table-progress ref="touristsComplaints" :config="touristsComplaintsConfig" style="height:300px;width: 98%;padding: 0;"></common-table-progress>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import CommonDualareaChart from '@/components/common/common-dualarea-chart.vue';

import CommonTableProgress from '@/components/common/common-table-progress.vue';

import TouristSource from '@/views/humanistic-tourism/tourist-source/tourist-source.vue';
import TouristInfo from '@/views/humanistic-tourism/tourist-info/tourist-info.vue';
import TouristConsumption from '@/views/humanistic-tourism/tourist-consumption/tourist-consumption.vue';

import TouristMap from '@/views/humanistic-tourism/tourist-map/tourist-map.vue';


import TouristVideo from '@/views/humanistic-tourism/tourist-video/tourist-video.vue';
import TouristStyle from '@/views/humanistic-tourism/tourist-style/tourist-style.vue';
// import TouristComplaint from '@/views/humanistic-tourism/tourist-complaint/tourist-complaint.vue';
import PublicOpinion from '@/views/humanistic-tourism/public-opinion/public-opinion.vue';
import countTo from '@/components/count-to';


export default {
  name: 'HumanisticManager',
  components: {
    TouristSource,
    TouristInfo,
    TouristConsumption,
    TouristMap,
    TouristStyle,
    // TouristComplaint,
    PublicOpinion,
    CommonDualareaChart,
    TouristVideo,
    countTo
  },
  data() {
    return {
      active:'0',
      startDate:'',
      endDate:'',
      countryNum:0,
      provinceNum:0,
      cityNum:0,
      totalIncome:0,
      interval:null,
      nowDate:new Date().format('yyyy年mm月dd日'),
      weekDay:['周日','周一','周二','周三','周四','周五','周六'][(new Date().getDay())],
      weatherData:{
        tmp:0,
        cond_txt:'',
        wind_dir:'',
        wind_sc:'',
        tmp_min:0,
        tmp_max:0,
      },
      tourismIncomeConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'tourismIncomeArea',
          x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          y: [
            {
              axis: {
                min: 0,
                max: 3000,
                name:"万元",
                offset: -10
              },
              title: '',
              data: [2175, 1896, 1932, 2156, 1756, 2152, 1928, 2298, 2465, 2496, 2395, 2375],
              startColor: '#77F7E7',
              endColor: 'rgba(119, 247, 231, 0)'
            }
          ]
        }
      }
    };
  },
  methods: {
    loadIncome() {
      this.$jqPost(this.$api.getGridDataInc, {
        sFJNM: "00010001001400090001",
        sCurYear: new Date().getFullYear(),
        sCurMonth: (new Date().getMonth() +1 )
      }).then(res => {
        if (res.retCode == 200 && res.retData) {
          res.retData.listDataBar.splice(0,1)
          this.tourismIncomeConfig.option.x = res.retData.listDataBar;
          this.tourismIncomeConfig.option.y[0].data = [];
          this.tourismIncomeConfig.option.x.forEach((item,index)=>{
            let num = res.retData.listData[0]['sPeriod' + (index + 1)] == ''?0: parseInt(res.retData.listData[0]['sPeriod' + (index + 1)])/10000
            this.tourismIncomeConfig.option.y[0].data.push(num)
          })
        }
        this.$refs.tourismIncome.initChart();
      })
    },
    getReceptionNumRange() {
      this.$jqPost(this.$api.getReceptionNumRange,{
        dataSource:'04',
        sFJNM:'00010001001400090001',
        sAreaType:'03',
        sObjName:'全部',
        sSelName:'全部',
        sObjType:'02',
        startDate:this.startDate,
        endDate:this.endDate
      }).then(res => {
        if (res.retCode === 200) {
          let data = res.retData.listData;
          this.countryNum = data.strarrValueBar.reduce((sum,current) => parseInt(sum) + parseInt(current));
        }
      });

      this.$jqPost(this.$api.getReceptionNumRange,{
        dataSource:'04',
        sFJNM:'00010001001400090001',
        sAreaType:'02',
        sObjName:'全部',
        sSelName:'全部',
        sObjType:'02',
        startDate:this.startDate,
        endDate:this.endDate
      }).then(res => {
        if (res.retCode === 200) {
          let data = res.retData.listData;
          this.provinceNum = data.strarrValueBar.reduce((sum,current) => parseInt(sum) + parseInt(current));
        }
      });

      this.$jqPost(this.$api.getReceptionNumRange,{
        dataSource:'04',
        sFJNM:'00010001001400090001',
        sAreaType:'01',
        sObjName:'全部',
        sSelName:'全部',
        sObjType:'02',
        startDate:this.startDate,
        endDate:this.endDate
      }).then(res => {
        if (res.retCode === 200) {
          let data = res.retData.listData;
          this.cityNum = data.strarrValueBar.reduce((sum,current) => parseInt(sum) + parseInt(current));
        }
      });
    },
    handleMapChange(act) {
      this.active = act;
    },
    getWeather(){
      this.$jqGet('https://free-api.heweather.net/s6/weather/now',{
        location:'hongtong',
        key:'4a7341cd99ac45689bcad38d18ba7b1c',
      }).then(res => {
        this.weatherData.cond_txt = res.HeWeather6[0].now.cond_txt;
        this.weatherData.tmp = res.HeWeather6[0].now.tmp;
        this.weatherData.wind_dir = res.HeWeather6[0].now.wind_dir;
        this.weatherData.wind_sc = res.HeWeather6[0].now.wind_sc;
      })


      this.$jqGet('https://free-api.heweather.net/s6/weather/forecast',{
        location:'hongtong',
        key:'4a7341cd99ac45689bcad38d18ba7b1c',
      }).then(res => {
        this.weatherData.tmp_min = res.HeWeather6[0].daily_forecast[0].tmp_min;
        this.weatherData.tmp_max = res.HeWeather6[0].daily_forecast[0].tmp_max;
      })

      this.$jqGet('https://free-api.heweather.net/s6/air/now?',{
        location:'hongtong',
        key:'4a7341cd99ac45689bcad38d18ba7b1c',
      }).then(res => {
        // console.log(res);
      })
    },
    getCostInfoByMonthGrid() {
      let _lastMonth = '';
      let currentMonth = new Date().getMonth();
      let currentYear = new Date().getFullYear();
      if (currentMonth == 0) {
        _lastMonth = `${currentYear-1}-12`;
      } else {
        _lastMonth = currentMonth < 10 ? `${currentYear}-0${currentMonth}` : `${currentYear}-${currentMonth}`;
      }

      this.$jqPost(this.$api.getCostInfoByMonthGrid,{
        sFJNM: "00010001001400090001",
        sSelAreaName: "全部",
        sYearMonth: _lastMonth,
        iPageNum: 1,
        iPageSize: 8
      }).then(res => {
        if (res.retCode === 200) {
          this.totalIncome = res.retData.listData[0].income;
        }
      })
    }
  },
  mounted() {
    this.startDate = new Date().format('yyyy-mm') + '-01';
    this.endDate = new Date().format('yyyy-mm-dd');

    this.loadIncome();
    this.getReceptionNumRange();

    this.getWeather();
    this.getCostInfoByMonthGrid();
    this.interval = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 20);
  },
  beforeDestroy(){
    clearInterval(this.interval);
  }
};
</script>

<style scoped lang="scss" type="text/scss">
  .content-left {
  width: 2543px;
  height: 1390px;
  box-sizing: inherit;
  .content-ll {
    width: 611px;
    height: 1360px;
    float: left;
  }
  .content-lm {
    width: 1251px;
    height: 1360px;
    float: left;
    margin-left: 20px;
  }
  .content-lr {
    width: 611px;
    height: 1360px;
    float: left;
    margin-left: 20px;
  }
}

.content-middle {
  width: 1846px;
  // margin-left: 53px;
  left: 2573px;
  padding-top: 130px;
  height: 1390px;
  box-sizing: inherit;
  > .content-mt {
    position: relative;
    width: 100%;
    height: 220px;
    // background-color: #008800;
    .slogan-box {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 879px;

      >img {
        width: 100%;
      }
    }
    >div {
      width: 1684px;
      margin-left: 80px;


      >div{
        float: left;
        width: 590px;
        height: 121px;
        background: url(../../assets/imgs/v2/mt-big.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 30px;

        >img {
          width: 80px;
          height: 80px;
          margin-top: 14px;
          margin-left: 42px;
          float: left;
        }
        >div {
          float: left;
          width:460px;
          >p {
            text-align: center;
            font-size: 20px;
            line-height: 44px;
            color: #6BEEFF;
          }
          .mt-weather-left {
            float: left;
            width: 160px;
            >.temperature {
              color: #FFCC01;
              font-size: 50px;
              line-height:55px;
              float: left;
              margin-left: 33px;
            }
            >span {
              display: inline-block;
              margin-top: 5px;
              margin-left: 5px;
            }
          }
          .mt-weather-right {
            float: right;
            width: 300px;
            text-align: center;
            font-size:22px;
            >p {
              height: 50px;
              line-height: 50px;
              >span {
                display: inline-block;
                margin-right:15px;
                &:first-child {
                  color: #FFCC01;
                }
              }
            }
            >div {
               display: inline-block;
              width:100px;
              height:30px;
              line-height: 30px;
              background:rgba(141,206,29,1);
              border-radius:5px;
            }
          }
        }

      }

      >p {
        float: left;
        > label {
          float: left;
          width: 140px;
          color: #6BEEFF;
          margin-left: 25px;
          font-size: 20px;
        }
        >span {
          font-size: 55px;
          color: #FFCC01;
          float: right;
          margin-right: 25px;
        }
      }
      >p:nth-child(2) {
        margin-left: 89px;
        width: 461px;
        height: 96px;
        background: url(../../assets/imgs/v2/mt-small.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 35px;

        >label {
          margin-top: 15px;
        }
        >span {
          margin-top: 22px;
        }
      }
      >p:nth-child(3) {
        margin-left: 89px;
        width: 452px;
        height: 86px;
        background: url(../../assets/imgs/v2/mt-small.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 40px;
        >label {
          margin-top: 12px;
        }
        >span {
          margin-top: 17px;
        }
      }
    }
  }
  > .content-mm {
    width: 100%;
    height: 740px;
  }
  > .content-mb {
    width: 100%;
    height: 400px;
    text-align:center;
    >div {
      display: inline-block;
      height: 100%;
      width: 1300px;
      >p {
        font-size: 22px;
        line-height: 40px;
      }
      >div {
        height: 360px;
      }
    }
  }
}

.content-right {
  width: 2543px;
  height: 1390px;
  margin-top: 130px;
  float: right;
  box-sizing: inherit;
  padding:0;
  // margin-right:30px;

  .content-rl {
    width: 611px;
    height: 1360px;
    float: left;
  }
  .content-rm {
    // width: 1251px;
    width: 611px;
    height: 1360px;
    float: left;

    margin-left: 20px;
  }
  .content-rr {
    // width: 611px;
    width: 1251px;
    height: 1360px;

    float: left;
    margin-left: 20px;
  }
}
</style>
